<template>
    <div class="goodInfoContainer">
        <!-- 轮播图部分 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <carousel :carouselList="carouselList"></carousel>
            </div>
        </div>


        <!-- 商品操作部分 -->
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header">{{ goodsInfo.title }}</div>
            <!--内容区-->
            <div class="mui-card-content">
                <p class="priceWra">
                    市场价 <span class="oldPrice">￥{{ goodsInfo.market_price }}</span>
                    销售价 <span class="price">￥{{ goodsInfo.sell_price }}</span>
                </p>
                <p class="countWra">
                购买数量：
                    <number-box :max="goodsInfo.stock_quantity"  :step="1" @addCat="handleAddCar"></number-box>
                </p>
                <p class="">
                    <mt-button type="primary" size="small" >立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addCar()">加入购物车</mt-button>
                </p>
            </div>
        </div>
        <transition
                @beforeEnter="beforeEnter"
                @enter="enter"
                @afterEnter="afterEnter"
        >
            <div id="ball" ref="ball" v-show="ballFlag"></div>
        </transition>

        <!-- 介绍部分 -->
        <div class="mui-card">
            <!--页眉，放置标题-->
            <div class="mui-card-header">商品参数</div>
            <!--内容区-->
            <div class="mui-card-content">
                <p>商品货号：{{ goodsInfo.goods_no }}</p>
                <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
                <p>上架时间：{{ goodsInfo.add_time | filterTime }}</p>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain
                           @click="photoInfo(goodsInfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain
                           @click="shopComment(goodsInfo.id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入 数字 按钮
    import numberBox from '../subComment/goodsNumBtn.vue'
    // 获取 轮播图
    import carousel from '../subComment/carousel.vue'

    // 引入 评论
    import comment from '../subComment/comment.vue'

    export default {
        data() {
            return {
                // 商品列表
                goodsInfo: [],
                // 轮播图 列表
                carouselList: [],
                // 小球是否显示
                ballFlag: false,
                // 购买的数量
                count: 1
            }
        },
        created() {
            this.getGoodsInfo()
            this.getCarouselList()
        },
        methods: {
            // 获取商品详情
            getGoodsInfo() {
                this.$http.get(`api/goods/getinfo/${ this.$route.params.id }`)
                    .then(function (data) {
                        var data = data.body
                        console.log(data.message[0])
                        if (data.status !== 0) return
                        this.goodsInfo = data.message[0]
                    })
            },
            // 获取 轮播图 列表
            getCarouselList() {
                this.$http.get(`api/getthumimages/${ this.$route.params.id }`)
                    .then(function (data) {
                        var data = data.body
                        if (data.status !== 0) return
                        this.carouselList = data.message
                    })
            },
            // 添加购物车
            addCar() {
                // 进行购物车动画 功能
                /*      {x: 223, y: 622.3333740234375}
                *   1、获取 小球 的 位置  和 购物车的 位置
                *   2、进行动画
                *   3、把  购物 列表 {id : xx, count: xx, price: xx, selected: true} 添加 到 公共资源中
                * */
                this.ballFlag = !this.ballFlag
                var order = {
                    id: this.goodsInfo.id,
                    price: this.goodsInfo.sell_price,
                    count: this.count,
                    selected: true
                }
                this.$store.commit('addOrder', order)
            },
            // 小球样式 动画
            beforeEnter(el) {
                el.style.transform = 'translate(0, 0)'
            },
            enter(el, done) {
                el.offsetWidth
                var ball = this.$refs.ball
                // 购物车的位置
                var carPos = this.getCarPos()
                // 小球位置
                var ballPos = {
                    x: ball.getBoundingClientRect().left,
                    y: ball.getBoundingClientRect().top
                }
                var translate = {
                    x: carPos.x - ballPos.x + 12,
                    y: carPos.y - ballPos.y,
                }
                el.style.transform = `translate(${ translate.x }px, ${ translate.y }px)`
                el.style.transition = 'all 0.5s cubic-bezier(.82,-0.08,.59,.81) '
                done()
            },
            afterEnter(el) {
                this.ballFlag = !this.ballFlag
            },
            // 接收子组件穿过来的 值 进行 处理添加购物车
            handleAddCar(value) {
                console.log(this.count)
                this.count = parseInt(value)
            },
            // 返回 购物车的 位置
            getCarPos() {
                var carPos = document.getElementById('shopCar')
                var posObj = {}
                posObj.x = carPos.getBoundingClientRect().left
                posObj.y = carPos.getBoundingClientRect().top
                return posObj
            },
            // 图文介绍
            photoInfo(id) {
                console.log(`api/goods/getdesc/${ id }`)
                // 编程式 路由
                this.$router.push({ name: 'goodsDesc', params: { id: id } })
            },
            // 商品评论
            shopComment(id) {
                console.log(id)
                this.$router.push({ name: 'goodsComment', params: { id: id } })
            }
        },
        components: {
            numberBox,
            carousel,
            comment
        }
    }
</script>

<style scoped lang="less">
    .goodInfoContainer {
        background-color: #eee;
        overflow: hidden;
        .mui-card-content {
            position: relative;
            padding: 15px;
            .price {
                color: #f00;
                font-size: 18px;
                font-weight: bold;
                margin-left: 10px;
            }
            .oldPrice {
                font-size: 14px;
            }
        }
        .mui-card-footer {
            flex-wrap: wrap;
            button {
                margin: 8px;
            }
        }
    }
    #ball {
        z-index: 999;
        width: 15px;
        height: 15px;
        background-color: #f00;
        border-radius: 50%;
        position: absolute;
        left: 152px;
        top: 408px;
        transform: translate(0px, 0px);
    }
</style>